<template>
  <div class="teleportBox test1">
    第1个 Teleport :disabled="true" 设置为true则to属性不生效,组件待在原位
  </div>
  <div class="teleportBox test2">第2个 :disabled="false" 设置为false则to属性生效</div>
  <div class="teleportBox test3">第3个</div>
  <Teleport :disabled="true" to=".test1">
    <TeleportTest />
  </Teleport>
  <Teleport :disabled="false" to=".test2">
    <TeleportTest />
  </Teleport>
</template>

<script setup lang="ts">
import TeleportTest from './TeleportTest.vue';
</script>

<style lang="scss" scoped>
.teleportBox {
  width: 80vw;
  height: 120px;
  background-color: pink;

  &:nth-child(2) {
    background-color: red;
  }

  &:nth-child(3) {
    background-color: rgb(0, 255, 0);
  }
}
</style>
